<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="Author" content="Jenny.Zhan">
  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  <title>素材管理</title>
  <link rel="stylesheet" href="<{$ipath}>alipay/css/base.css">
  <link rel="stylesheet" href="<{$ipath}>alipay/css/layout.css">
  <link rel="stylesheet" href="<{$ipath}>alipay/css/multi.css">

<script src="<{$ipath}>alipay/js/jquery-1.7.1.min.js"></script>
<script src="<{$ipath}>wx/js/ajaxfileupload.js"></script>
<script src="<{$baseurl}>lib/kdeditor/kindeditor.js"></script>
<script src="<{$baseurl}>lib/kdeditor/lang/zh_CN.js" type="text/javascript"></script>
<script src="<{$baseurl}>lib/kdeditor/plugins/code/prettify.js" type="text/javascript"></script>
<script>var K=window.KindEditor;</script>
</head>
<body>
	<div class="section-cont">
		<h1 class="fn-title">多图文广播</h1>
		<div class="title-btn fr"><a href="?g=alipay&m=fodder&a=index" class="btn btn-gray">返&nbsp;&nbsp;回</a></div>
		
		<div class="main-edit cl">
			<div class="left-show fl" id="messageList">
				<ul class="show-cont ui-sortable" id="J_showCont">
					<{if $data}>
					<{foreach $data as $k => $v}>
						<{if $k eq 0}>
						<li id="item_1" class="first-item multiMsgItem">
							<div class="multiMsgMode">
								<div class="multimessage-show-title"><h1 class="show-title J_change_title" data-title="title" data-default="标题">
										<{if $v.title}><{$v.title}><{else}>标题<{/if}>
									</h1><div class="title-mask-bg"></div></div>
								<div class="cover-pic J_change_image" data-image="image" data-default="封面图片">
									<{if $v.img_url}><img src="<{$v.img_url}>" /><{else}>封面图片<{/if}>
								</div>
								<div class="overlay-first-item J_hoverShow">
									<div class="icon-box">
										<a href="javascript:editCon(1);" class="editor-icon first-position J_editArticle" title="编辑"></a>
									</div>
									<div class="ver_mh"></div>
								</div>
							</div>
						</li>
						<{else}>
						<li id="item_<{$k + 1}>" class="show-item fn-clear">
							<div class="cover-pic J_change_image" data-image="image" data-default="缩略图">
								<{if $v.img_url}><img src="<{$v.img_url}>" /><{else}>缩略图<{/if}>
							</div>
							<h1 class="show-title title-break J_change_title" data-title="title" data-default="标题">
								<{if $v.title}><{$v.title}><{else}>标题<{/if}>
							</h1>
							<div class="overlay-article-mask J_hoverShow">
								<div class="icon-box">
									<a href="javascript:editCon(<{$k + 1}>);" class="editor-icon J_editArticle" title="编辑"></a>
									<{if $k neq 1}>
									<a href="javascript:delCon(<{$k + 1}>, <{$v.id}>);" class="del-icon J_deleteArticle" title="删除"></a>
									<{/if}>
								</div>
								<div class="ver_mh">
								</div>
							</div>
						</li>
						<{/if}>
					<{/foreach}>
					<{else}>
					<li id="item_1" class="first-item multiMsgItem">
						<div class="multiMsgMode">
							<div class="multimessage-show-title"><h1 class="show-title J_change_title" data-title="title" data-default="标题">标题</h1><div class="title-mask-bg"></div></div>
							<div class="cover-pic J_change_image" data-image="image" data-default="封面图片">
								封面图片
							</div>
							<div class="overlay-first-item J_hoverShow">
								<div class="icon-box">
									<a href="javascript:editCon(1);" class="editor-icon first-position J_editArticle" title="编辑"></a>
								</div>
								<div class="ver_mh"></div>
							</div>
						</div>
					</li>
					<li id="item_2" class="show-item fn-clear">
						<div class="cover-pic J_change_image" data-image="image" data-default="缩略图">
							缩略图
						</div>
						<h1 class="show-title title-break J_change_title" data-title="title" data-default="标题">
							标题
						</h1>
						<div class="overlay-article-mask J_hoverShow">
							<div class="icon-box">
								<a href="javascript:editCon(2);" class="editor-icon J_editArticle" title="编辑">
								</a>
							</div>
							<div class="ver_mh"></div></div>
					</li>
					<{/if}>
				</ul>
				<!--多图文特有结构 singleMsgMode-->

				<div id="J_multiBox" class="multiMsgMode">
					<a href="javascript:;" class="add-item add-style" id="J_addItem"></a>
					<p class="article-left-tip">还可添加 <span class="article-left" id="J_aticleNum"></span> 篇文章</p>
				</div>

				<!--多图文特有结构 multiMsgMode END-->
			</div>

			<form action="?g=alipay&m=fodder&a=add" method="post" id="msgForm">
			<div class="edit-right fl">
				<div class="arrow-icon" title="箭头"></div> 
				<{if $data}>
					<input type="hidden" name="msgid" value="<{$msgid}>">
				<{foreach $data as $k => $v}>
					<input type="hidden" name="id[]" value="<{$v.id}>">

					<dl class="edit-cont" id="item_<{$k + 1}>_edit">
						<dt class="edit-title">标题</dt>
						<dd class="cl">
							<div class="input-container input-container-left">
								<input type="text" name="title[]" class="edit-input" placeholder="最多可输入32个字" maxlength="32" data-name="title" onblur="chkEle(this)" value="<{$v.title}>"/>
								<div class="form-validate-tip form-validate-tip-botm cl">
									<div class="form-explain fl dn">请填写标题</div>
								</div>
							</div>
						</dd>
						<dt class="edit-title cl">封面</dt>
						<dd class="cl upload-valid-item">
							<div class="uploadImgBox hide-upload-dom">
								<div class="upload-photo fl" title="+上传">
									<div class="uploadify">
										<div class="uploadify-button">
											<span class="uploadify-button-text uploadarea<{$k + 1}>">
												<{if $v.img_url}><img src="<{$v.img_url}>" /><{else}>+上传<{/if}>
											</span>
											<input type="file" name="uploadimg" id="uploadimg<{$k + 1}>" onchange="uploadimgs(<{$k + 1}>)" class="dn">
										</div>
									</div>
								</div>
							</div>
							<div class="fl note-word">建议尺寸 270 x 135px，支持 .jpg .jpeg .png 格式，小于3M。</div>
							<div class="form-validate-tip cl">
								<input type="hidden" class="J_enter_image" id="hiddenimg<{$k + 1}>" name="ajaximg[]" value="<{$v.img_url}>">
								<div class="form-explain fl dn face<{$k+1}>">请上传封面</div>
							</div>
						</dd>
						<dt class="edit-title">详情</dt>
						<dd class="msg-content-tab-container">
							<textarea type="text" name="intro[]" id="content<{$k + 1}>" class="div_textarea"><{$v.content}></textarea>
							<div class="form-validate-tip form-validate-tip-botm dn">
									<div class="form-explain fl">请填写内容</div>
								</div>
							<script>K.create("#content<{$k + 1}>",{height:"300px",width:"100%",cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,afterBlur: function(){this.sync();checkcontent("#content<{$k + 1}>");}});</script>
						</dd>
					</dl>

				<{/foreach}>
				<{else}>
				<dl class="edit-cont" id="item_1_edit">
					<dt class="edit-title">标题</dt>
					<dd class="cl">
						<div class="input-container input-container-left">
							<input type="text" class="edit-input" placeholder="最多可输入32个字" maxlength="32" data-name="title" name="title[]" onblur="chkEle(this)" value=""/>
							<div class="form-validate-tip form-validate-tip-botm cl">
								<div class="form-explain fl dn">请填写标题</div>
							</div>
						</div>
					</dd>
					<dt class="edit-title cl">封面</dt>
					<dd class="cl upload-valid-item">
						<div class="uploadImgBox hide-upload-dom">
							<div class="upload-photo fl" title="+上传">
								<div class="uploadify">
									<div class="uploadify-button"><span class="uploadify-button-text uploadarea1">
												+上传
											</span><input type="file" name="uploadimg" id="uploadimg1" onchange="uploadimgs(1)" class="dn"></div>

								</div>
							</div>
						</div>
						<div class="fl note-word">建议尺寸 270 x 135px，支持 .jpg .jpeg .png 格式，小于3M。</div>

						<div class="form-validate-tip cl">
							<input type="hidden" class="J_enter_image" id="hiddenimg1" name="ajaximg[]" value="">
							<div class="form-explain fl dn face1">请上传封面</div>
						</div>
					</dd>

					<dt class="edit-title">详情</dt>
					<dd class="msg-content-tab-container">
						<!--富文本编辑器-->
						<textarea type="text" name="intro[]" id="content1" class="div_textarea"></textarea><div class="form-validate-tip form-validate-tip-botm dn">
									<div class="form-explain fl">请填写内容</div>
								</div>
						<script>K.create("#content1",{height:"300px",cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,afterBlur: function(){this.sync();checkcontent("#content1");}});</script>
						<!--富文本编辑器 END-->
					</dd>
				</dl>
				<dl class="edit-cont" id="item_2_edit" style="display: none">
					<dt class="edit-title">标题</dt>
					<dd class="cl">
						<div class="input-container input-container-left">
							<input type="text" class="edit-input" placeholder="最多可输入32个字" maxlength="32" data-name="title" name="title[]" onblur="chkEle(this)" value=""/>
							<div class="form-validate-tip form-validate-tip-botm cl">
								<div class="form-explain fl dn">请填写标题</div>
							</div>
						</div>
					</dd>
					<dt class="edit-title cl">封面</dt>
					<dd class="cl upload-valid-item">
						<div class="uploadImgBox hide-upload-dom">
							<div class="upload-photo fl" title="+上传">
								<div class="uploadify">
									<div class="uploadify-button"><span class="uploadify-button-text uploadarea2">
												+上传
											</span><input type="file" name="uploadimg" id="uploadimg2" onchange="uploadimgs(2)" class="dn"></div>

								</div>
							</div>
						</div>
						<div class="fl note-word">建议尺寸 270 x 135px，支持 .jpg .jpeg .png 格式，小于3M。</div>

						<div class="form-validate-tip cl">
							<input type="hidden" class="J_enter_image" id="hiddenimg2" name="ajaximg[]" value="">
							<div class="form-explain fl dn face2">请上传封面</div>
						</div>
					</dd>

					<dt class="edit-title">详情</dt>
					<dd class="msg-content-tab-container">
						<!--富文本编辑器-->
						<textarea type="text" name="intro[]" id="content2" class="div_textarea"></textarea>
						<div class="form-validate-tip form-validate-tip-botm dn">
									<div class="form-explain fl">请填写内容</div>
								</div>
						<script>K.create("#content2",{height:"300px",width:"100%",cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,afterBlur: function(){this.sync();checkcontent("#content2");}});</script>
						<!--富文本编辑器 END-->
					</dd>
				</dl>
				<{/if}>
			</div>
			</form>
		</div>
		<div class="edit-btn">
			<a href="javascript:ckform();" class="save-btn btn btn-orange" id="J_saveBtn">
				保&nbsp;&nbsp;存
			</a>
			<!--<a href="" class="preview-btn btn btn-gray" id="J_previewBtn">预&nbsp;&nbsp;览</a>-->
		</div>
	</div>

	<script>
	$(function(){
		var count = $('.edit-cont').length;
		$('#J_addItem').click(function(){
			count++;
			var html = '',html2 = '';
			html += '<li class="show-item fn-clear" id="item_'+(count)+'"><div data-default="缩略图" data-image="image" class="cover-pic J_change_image">缩略图</div>';
			html += '<h1 data-default="标题" data-title="title" class="show-title title-break J_change_title">标题</h1>';
			html += '<div class="overlay-article-mask J_hoverShow">';
			html += '<div class="icon-box"><a title="编辑" class="editor-icon J_editArticle" href="javascript:editCon('+count+');"></a><a title="删除" class="del-icon J_deleteArticle" href="javascript:delCon('+count+');"></a></div>';
			html += '<div class="ver_mh"></div></div></li>';

			html2 += '<dl class="edit-cont" id="item_'+count+'_edit">';
			html2 += '<dt class="edit-title">标题</dt><dd class="cl"><div class="input-container input-container-left">';
			html2 += '<input type="text" name="title[]" class="edit-input" placeholder="最多可输入32个字" maxlength="32" data-name="title" onblur="chkEle(this)"/>';
			html2 += '<div class="form-validate-tip form-validate-tip-botm cl"><div class="form-explain fl dn">请填写标题</div></div>';
			html2 += '</div></dd>';
			html2 += '<dt class="edit-title cl">封面</dt><dd class="cl upload-valid-item"><div class="uploadImgBox hide-upload-dom">';
			html2 += '<div class="upload-photo fl" title="+上传"><div class="uploadify"><div class="uploadify-button"><span class="uploadify-button-text uploadarea'+count+'">+上传</span><input type="file" name="uploadimg" id="uploadimg'+count+'" onchange="uploadimgs('+count+')" class="dn"></div></div></div></div>';
			html2 += '<div class="fl note-word">建议尺寸 270 x 135px，支持 .jpg .jpeg .png 格式，小于3M。</div>';
			html2 += '<div class="form-validate-tip cl"><input type="hidden" class="J_enter_image" id="hiddenimg'+count+'" name="ajaximg[]" value=""><div class="form-explain fl dn face'+count+'">请上传封面</div></div></dd>';
			html2 += '<dt class="edit-title">详情</dt><dd class="msg-content-tab-container">		                            ';
			html2 += '<textarea type="text" name="intro[]" id="content'+count+'" class="div_textarea"></textarea><div class="form-validate-tip form-validate-tip-botm dn"><div class="form-explain fl">请填写内容</div></div>';
			html2 += '</dd></dl>';
			if (parseInt($('#J_aticleNum').text())>1){
				$('#J_showCont').append(html);				
                $('.edit-cont').hide();
                $("#msgForm .edit-right").append(html2);            
				updateAddAction();
                (function(c){
                    K.create("#content"+c,{cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,
                    afterBlur: function(){
                        this.sync();                        
                        checkcontent("#content"+c);
                    }});
                })(count);
			}else{
				$('#J_showCont').append(html);				
                $('.edit-cont').hide();
                $("#msgForm .edit-right").append(html2);  
				$('#J_multiBox').hide();
                (function(c){
                    K.create("#content"+c,{cssPath:"<{$baseurl}>lib/kdeditor/plugins/code/prettify.css",uploadJson:"<{$baseurl}>lib/kdeditor/php/upload_json.php",fileManagerJson:"<{$baseurl}>lib/kdeditor/php/file_manager_json.php",allowFileManager:true,
                    afterBlur: function(){
                        this.sync();
                        checkcontent("#content"+c);
                    }});
                })(count);
			}
			editCon(count);
		});
		//模拟上传点击
		$(document).on("click", ".uploadify-button-text",function(){
			$(this).next().trigger("click");
		});
	});

	function updateAddAction() {
		var a = $(".article-left-tip", "#J_multiBox"),
			b = $("#J_aticleNum"),
			c = $("#J_addItem");
			dd = $("#J_showCont li").length;
			maxitemListLen = 6;
            
		b.text(maxitemListLen - dd);

        if(maxitemListLen-dd>0){
            $("#J_multiBox").show();
        }else{
            $("#J_multiBox").hide();
        }
	}
	updateAddAction();//还可添加 n 篇文章

	function delCon(id, fid){
		var a = $('#item_'+id),
			b = $('#item_'+id+'_edit');
		var url = '?g=alipay&m=fodder&a=ajaxdel';
		if(fid) {
			var r=confirm("确定要删除？删除后不可恢复！");
			if (r == true) {
				$.post(url, {id: fid}, function (data) {
					if (data.status) {
						a.remove();
						b.remove();
                        updateAddAction();
						//document.write("删除成功！");
					}
				}, 'json');
			}
		}
		else{
			a.remove();
			b.remove();
			updateAddAction();
			//alert(maxitemListLen - dd);
			//if(maxitemListLen - dd)
			//{
			//	$('#J_multiBox').show();
			//}
		}
		editCon(1);
	}
	editCon(1);
	function editCon(id){
		var a = $('#item_'+id),
			b = $('#item_'+id+'_edit'),
			c = $('.edit-cont');
        var index=a.index();
		c.hide();
		b.show();
		if(id==1){
			$(".arrow-icon").css("top","57px");
		}else{
			var top=136;
			top+=	index*62-31;
			$(".arrow-icon").css("top",top+"px");
		}
	}

	function onfocusInt (a, b) {
		var c = a.closest("dd"),
			d = $(a).attr("maxlength"),
			f = a.val().replace(/(\n|\r\r\n|\r\n\r)/g, "\r\n").length,
			g = c.find(".form-left-words"),
			h = d - f;
		"title" === $(a).data("name") ? 0 > h ? (g.css("color", "#f00"), g.html("已超出" + -h + "个字")) : (g.css("color", "#999"), g.html('还可输入<span class="form-left-words-number">' + h + "</span>个字")) : c.find(".form-left-words span").text(h), "focus" == b ? (c.find(".form-left-words").show(), c.find(".form-explain").hide()) : "blur" == b && c.find(".form-left-words").hide()
	}
	function checkcontent(obj){
			var con = $(obj);
			if ($.trim(con.val())== ''){
				con.siblings('.form-validate-tip').removeClass('dn');
			}else{
				con.siblings('.form-validate-tip').addClass('dn');
			}
	}
	function ckform(){
		var valid=true;
		$('.edit-cont').each(function(i){
			var _t = $(this);
			var	tit = _t.find('.edit-input'),
			img = _t.find('.J_enter_image');
			var con = _t.find('.div_textarea');
			if ($.trim(tit.val())=='')
			{
				$('.edit-cont').hide().eq(i).show();
				tit.next().find('div').removeClass('dn');
				valid= false;
			}
			if (img.val()=='')
			{
				img.next().removeClass('dn');
				valid= false;
			}
			if($.trim(con.val())==''){
				con.siblings('.form-validate-tip').removeClass('dn');
				valid= false;
			}else{
				con.siblings('.form-validate-tip').addClass('dn');		
			}
			if(!valid){
                var itemId=_t.attr("id");
                var itemCount=itemId.replace("item_","").replace("_edit","");
				editCon(itemCount);
				return false;
			}
		});
		if(valid){
			$('.edit-cont').each(function(i){			
				$('#msgForm').submit();
			});
		}
	}
	function chkEle(o){
		var _t = $(o);
		if ($.trim(_t.val())=='')
		{
			_t.parent().find('.form-validate-tip').find('div').removeClass('dn');
		}else{
			_t.parent().find('.form-validate-tip').find('div').addClass('dn');
		}
	}
	function uploadimgs(n){
		//alert(n);return;
		var url ="?g=alipay&m=fodder&a=ajaxup";
		$.ajaxFileUpload({
			url:url,
			dataType:'json',
			fileElementId:'uploadimg'+n,
			type:'post',
			secureuri:false,
			success:function(data){
				if(data.status==1){
					//alert('上传成功');
					$('.uploadarea'+n).html('<img src="'+ data.msg +'">');
					$('#item_'+n).find('.cover-pic').html('<img src="'+ data.msg +'">');
					$('#hiddenimg'+n).val(data.msg);
					$('.face'+n).addClass('dn');
				}else{
					alert(data.msg);
					return false;
				}
			},
		});
	}
	$(document).on('keyup','.edit-cont input',function(){
			var t = $(this),
				d = t.closest('dl'),
				i = d.attr('id').replace('_edit','');
			$('#'+i).find('.show-title').html(t.val());
		
		});
	</script>
</body>
</html>